<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>表单</title>
        <link rel="stylesheet" href="/styles/form.css">
    </head>
    <body>

        <p class="title">使用GET方式提交表单</p>
        <form action="http://localhost:8080/feiyan" method="get">
            <div class="row"> 
                <label for="username">用户名</label>
                <input type="text" name="username" id="username"> 
            </div>
            <div class="row"> 
                <label for="password">密码</label>
                <input type="password" name="password" id="password"> 
            </div>
            <div class="row"> 
                <span>性别</span>
                <input type="radio" name="gender" value="male" id="maleGender"> 
                <label for="maleGender">靓仔</label>
                <input type="radio" name="gender" value="female" id="femaleGender"> 
                <label for="femaleGender">靓妹</label>
            </div>
            <div class="row">
                <input type="reset" value="重置">
                <input type="submit" value="提交">
            </div>
        </form>

        <p class="title">使用POST方式提交表单</p>
        <!-- 使用 form 元素的 enctype 属性规定在向服务器发送表单数据之前如何对其进行编码 -->
        <form action="http://localhost:8080/zoubi" 
              method="post"
              enctype="application/x-www-form-urlencoded">
            <div class="row"> 
                <label for="username">用户名</label>
                <input type="text" name="username" value="laowang" id="username"> 
            </div>
            <div class="row"> 
                <label for="password">密码</label>
                <input type="password" name="password" value="123456" id="password"> 
            </div>
            <div class="row"> 
                <span>性别</span>
                <input type="radio" name="gender" value="male" checked id="maleGender"> 
                <label for="maleGender">靓仔</label>
                <input type="radio" name="gender" value="female" id="femaleGender"> 
                <label for="femaleGender">靓妹</label>
            </div>
            <div class="row">
                <input type="reset" value="重置">
                <input type="submit" value="提交">
            </div>
        </form>

        <p class="title">使用POST方式提交表单</p>
        <form action="http://localhost:8080/mata" 
              method="post"
              enctype="text/plain">
            <div class="row"> 
                <label for="username">用户名</label>
                <input type="text" name="username" id="username"> 
            </div>
            <div class="row"> 
                <label for="password">密码</label>
                <input type="password" name="password" id="password"> 
            </div>
            <div class="row"> 
                <span>性别</span>
                <input type="radio" name="gender" value="male" id="maleGender"> 
                <label for="maleGender">靓仔</label>
                <input type="radio" name="gender" value="female" id="femaleGender"> 
                <label for="femaleGender">靓妹</label>
            </div>
            <div class="row">
                <input type="reset" value="重置">
                <input type="submit" value="提交">
            </div>
        </form>
        
    </body>
</html>